<!--
 * @Description: 面试技巧
 * @Author: 李宝梁
 * @Date: 2022-09-17 11:29:06
 * @LastEditTime: 2022-09-21 15:29:55
 * @LastEditors: 毕富成
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="18">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="关键词">
                <el-input
                  v-model="formInline.user"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.state" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="delsearch">清除</el-button>
                <el-button type="primary" size="small" @click="searchArticle">
                  搜索
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="success"
              @click="addupdateArticle"
            >
              新增技巧
            </el-button>
          </el-col>
        </el-row>
        <!-- 数据一共 -->
        <!-- table表格 -->
        <template>
          <el-table :data="tableData" style="width: 100%" width="200">
            <el-table-column
              label="序号"
              width="80"
              type="index"
            ></el-table-column>
            <el-table-column label="文章标题" width="500" prop="title">
              <template v-slot="{ row }">
                {{ row.title }}
                <a
                  v-if="row.videoURL"
                  href="javascript:;"
                  @click="showVideodia(row)"
                >
                  <i class="el-icon-film"></i>
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="阅读数"
              width="100"
              prop="visits"
            ></el-table-column>
            <el-table-column
              label="录入人"
              width="100"
              prop="username"
            ></el-table-column>
            <el-table-column label="录入时间" width="100" prop="createTime">
              <template v-slot="{ row }">
                {{ row.createTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100" prop="state">
              <template v-slot="{ row }">
                {{ row.state === 1 ? '已启用' : '已禁用' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template v-slot="{ row }">
                <el-button type="text" size="small" @click="onPreArt(row)">
                  预览
                </el-button>
                <el-button type="text" size="small" @click="ArticleState(row)">
                  {{ row.state === 1 ? '已开启' : '已禁用' }}
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="row.state === 1 ? false : true"
                  @click="updateArticle(row.id)"
                >
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  :disabled="!row.state"
                  @click="delArticle(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            background
            :current-page.sync="page.page"
            :page-sizes="[5, 10, 20]"
            :page-size="page.pagesize"
            layout="prev,pager,next,sizes,jumper"
            :total="page.total"
            style="margin-top: 20px; text-align: right"
            @current-change="changePage"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-card>
      <!-- 修改弹出层 -->
      <el-dialog
        :visible="showDialog"
        title="修改文章"
        width="800px"
        @close="btnCancel"
      >
        <!-- 表单区域 -->
        <el-form :model="inputValue" :rules="rules">
          <el-form-item label="文章标题" prop="articleName" label-width="80px">
            <el-input
              v-model="inputValue.title"
              style="width: 640px"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="文章内容"
            prop="articleContent"
            label-width="80px"
          >
            <quill-editor
              v-model="inputValue.articleBody"
              style="width: 640px; height: 200px; margin-bottom: 50px"
              :options="editorOption"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" label-width="80px" prop="videoURL">
            <el-input
              v-model="inputValue.videoURL"
              style="width: 640px"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="updateArticleOK">确认</el-button>
        </span>
      </el-dialog>
      <!-- 添加弹层 -->
      <el-dialog
        :visible="addshowDialog"
        title="添加文章"
        width="800px"
        @close="btnCancel"
      >
        <!-- 表单区域 -->
        <el-form :model="inputValue" :rules="rules1">
          <el-form-item label="文章标题" prop="ArticleName" label-width="80px">
            <el-input
              v-model="inputValue.title"
              style="width: 640px"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="文章内容"
            prop="ArticleContent"
            label-width="80px"
          >
            <quill-editor
              v-model="inputValue.articleBody"
              style="width: 640px; height: 200px; margin-bottom: 50px"
              :options="editorOption"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" label-width="80px" prop="videoURL">
            <el-input
              v-model="inputValue.videoURL"
              style="width: 640px"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="addupdateArticleOK">确认</el-button>
        </span>
      </el-dialog>
      <!-- 视频弹层 -->
      <div v-if="showVideo" class="video">
        <div class="video-ico" @click="closeVideo">
          <span class="el-icon-close"></span>
        </div>
        <div class="video-box">
          <video :src="videoUrl" muted autoplay controls></video>
        </div>
      </div>
      <!-- 文章预览弹层 -->
      <ArticlesPreview ref="artPre" :row="artPreRow"></ArticlesPreview>
    </div>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  update,
  add,
  changeState
} from '@/api/hmmm/articles'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 文章预览弹层
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  components: {
    quillEditor,
    ArticlesPreview
  },
  data() {
    return {
      dis1: false,
      showVideo: false,
      inputValue: { articleBody: '', title: '', videoURL: '' },
      rules: {
        articleName: [
          { required: true, message: '文章标题为必填项', trigger: 'blur' }
        ],
        articleContent: [
          { required: true, message: '文章内容为必填项', trigger: 'blur' }
        ]
      },
      rules1: {
        ArticleName: [
          { required: true, message: '文章标题为必填项', trigger: 'blur' }
        ],
        ArticleContent: [
          { required: true, message: '文章内容为必填项', trigger: 'blur' }
        ]
      },
      videoUrl: '',
      switchvalue: '100',
      dailogInputLabel: '',
      showDialog: false,
      addshowDialog: false,
      formInline: {
        user: null,
        region: null
      },
      tableData: [],
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        total: 0 // 总数
      },
      editorOption: {
        // 工具菜单栏配置
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        }
      },
      artPreRow: {} // 传给文章预览弹层的数据
    }
  },
  computed: {
    showText() {
      return this.inputValue.id ? '修改文章' : '添加文章'
    }
  },

  created() {
    this.getArticlesList()
  },
  methods: {
    // 关闭视频
    closeVideo() {
      this.showVideo = false
    },
    // 播放视频
    showVideodia(row) {
      this.showVideo = true
      this.videoUrl = row.videoURL
    },
    // 搜索文章
    async searchArticle() {
      console.log(this.formInline.state)
      const { data } = await list({
        keyword: this.formInline.user,
        state: this.formInline.state
      })
      console.log(data)
      this.tableData = data.items
    },
    delsearch() {
      this.formInline.user = ''
      this.formInline.region = ''
      this.getArticlesList()
    },
    // 获取数据 渲染
    async getArticlesList() {
      try {
        const { data } = await list({
          page: this.page.page,
          pagesize: this.page.pagesize
        })
        this.tableData = data.items
        this.page.total = data.counts
        // console.log(data)
        console.log(this.tableData)
        if (this.tableData.state == 0) {
          // console.log(123)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 变换页码
    changePage(newpage) {
      this.page.page = newpage
      this.getArticlesList()
    },
    // 页码变换
    handleSizeChange(pagesize) {
      this.page.pagesize = pagesize
      this.getArticlesList()
    },
    // 修改文章
    async updateArticle(id) {
      try {
        this.showDialog = true
        const { data } = await detail({
          id
        })
        // console.log(data)
        this.inputValue = data
        this.$nextTick(() => {
          this.showDialog = true
        })
        // console.log(this.inputValue)
      } catch (err) {
        console.log(err)
      }
    },
    // 修改文章确定
    async updateArticleOK() {
      await update(this.inputValue)
      this.$message.success('修改成功')
      this.getArticlesList()
      this.btnCancel()
    },
    // 添加文章
    async addupdateArticle() {
      this.addshowDialog = true
    },
    // 添加文章确定
    async addupdateArticleOK() {
      await add(this.inputValue)
      this.$message.success('添加成功')
      this.getArticlesList()
      this.btnCancel()
    },
    // 取消
    btnCancel() {
      this.showDialog = false
      this.addshowDialog = false
      this.inputValue = { articleBody: '', title: '', videoURL: '' }
    },
    // 确定
    btnOK() {
      this.btnCancel()
    },
    // 删除文章
    async delArticle(id) {
      try {
        await this.$confirm('确定删除么')
        console.log(id)
        const { data } = await remove({ id })
        console.log(data)
        this.$message.success('删除成功')
        this.getArticlesList()
      } catch (err) {
        console.log(err)
      }
    },
    // 文章禁用启用
    async ArticleState(row) {
      try {
        await changeState({
          id: row.id,
          state: row.state == 1 ? 0 : 1
        })
        this.getArticlesList()
        // console.log(123)
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 点击文章预览
    onPreArt(row) {
      this.artPreRow = row
      this.$refs.artPre.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.preview-box {
  .preview-title {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .preview-nav {
    span {
      margin-right: 10px;
    }
  }
  .preview-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
  }
}
.fa-film:before {
  color: #0000ff;
}
.video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-ico {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .video-box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
